﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WFS GetFeature接口获取要素</title>
    <!--导入外部样式表-->
    <link href="../../css/openlayers/style.css" rel="stylesheet" type="text/css" />
    <!--必要的脚本引用-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="json" src="./static/libs/include-openlayers-local.js"></script>
    <style type="text/css">
        body, html, div, ul, li, iframe, p, img {
            border: none;
            padding: 0;
            margin: 0;
        }

        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }

        #menu {
            text-align: center;
            width: 100%;
            height: 20px;
            padding: 5px 10px;
            font-size: 14px;
            font-family: "微软雅黑";
            left: 10px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <label class="checkbox" style="font-weight: bold;"><input type="checkbox" name="maps" value="wfs" />arcgisonline WFS</label>
    </div>
    <div id="mapCon">
    </div>
    <script type="text/javascript">
        //WFS图层数据
        var wfsLayer;
        // 矢量图层数据源
        var vectorSource;

        //创建ol.format.GeoJSON对象，用来解析 WFS GetFeature接口的响应结果
        var geojsonFormat = new ol.format.GeoJSON();
        //实例化矢量图层数据源对象（使用ajax请求WFS服务）
        vectorSource = new ol.source.Vector({
            loader: function (extent, resolution, projection) {
                //WFS的GetFeature接口访问地址，指定服务回调方法
                var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
                    'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
                    'outputFormat=text/javascript&format_options=callback:loadFeatures' +
                    '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
                //使用jQuery的ajax方法进行请求，使用jsonp方式，设置jsonp参数为false防止jQuery添加“callback”回调方法
                $.ajax({ url: url, dataType: 'jsonp', jsonp: false });
            },
            //加载策略设置
            strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
                maxZoom: 19
            }))
        });
        /**
        * JSONP WFS 的回调方法（callback）
        * @param {Object} response 响应对象
        */
        window.loadFeatures = function (response) {
            //解析WFS GetFeature接口的响应结果，将解析得到的矢量要素添加到数据源中
            vectorSource.addFeatures(geojsonFormat.readFeatures(response));
        };
        //实例化ol.layer.Vector对象加载WFS要素
        wfsLayer = new ol.layer.Vector({
            //数据源（WFS的矢量要素）
            source: vectorSource,
            //矢量要素样式
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2
                })
            })
        });

        //实例化Map对象加载地图,默认底图加载OSM地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'mapCon', //地图容器div的ID
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [-8908887.277395891, 5381918.072437216],
                maxZoom: 19,
                zoom: 12
            })
        });

        //通过复选框控制加载与移除WFS服务图层数据
        $("input[name='maps']")[0].onclick = function () {
            if ($("input[name='maps']")[0].checked) {
                //加载WFS的矢量要素图层
                map.addLayer(wfsLayer);
            }
            else {
                //移除WFS的矢量要素图层
                map.removeLayer(wfsLayer);
            }
        };
    </script>
</body>
</html>
